﻿@{
    ViewBag.Title = "Home Page";
}

<h2>@ViewBag.Message</h2>
<p>
    To learn more about ASP.NET MVC visit <a href="http://asp.net/mvc" title="ASP.NET MVC Website">http://asp.net/mvc</a>.
</p>

<script src="../../Scripts/knockout-2.0.0.js"></script>

<!-- ko foreach: Datas-->
    <span data-bind="text:itemName"></span>:
    <input type="text" 
        data-bind="value:itemValue,attr:{tabIndex:tabIndex},event:{keydown:$root.go2next}"/>
<!-- /ko -->


<script>
    function Item(itemName, itemValue, tabIndex) {
        this.itemName= ko.observable(itemName);
        this.itemValue= ko.observable(itemValue);
        this.tabIndex= ko.observable(tabIndex);
    }



    function DbData() {
        var self = this;

        var ds=[];

        ds.push(new Item("db", "dbkdkdkdkd",0));
        ds.push(new Item("weight", "13.3",1));

        
        self.Datas = ko.observableArray(ds);
     
        self.go2next = function (me) {
            if (event.keyCode == 13) {
                event.preventDefault();
                
                var nextIndex = me.tabIndex() + 1;
                
                if (nextIndex >= self.Datas().length) {
                    self.Datas.push(new Item("db", "dbkdkdkdkd", ds.length ));
                    self.Datas.push(new Item("weight", "13.3", ds.length ));
                }
                $('input[tabIndex="' + nextIndex + '"]').focus();
            }
        };
    }


    var model = new DbData();
    ko.applyBindings(model);


    $(function () {
    });
</script>